Random Color Generated Icons on Every Page Load

In this tutorial, I will show you a small snippet I used every time in my projects to create a random colour icons on every page loads using some simple javascript and jquery codes. I used this to improve the look and feel of my applications. Here for the demo purpose, I am using font awesome icons but you can also use any icons like glyphicons or any HTML components like boxes too depending upon your need.

Let's Start Coding

The javascript code for generating random colour icon is given below.

$(document).ready(function () {
    $('.fa').each(function () {
        $(this).css('color', randomColor());
    });
});
		
var colors = ['00', '33', '66', '99', 'cc', 'ff'];
var rand = function () {
		return Math.floor(Math.random() * 6);
	   };
		
var randomColor = function () {
			var r = colors[rand()];
			var g = colors[rand()];
			var b = colors[rand()];
			return "#" + r + g + b;
		};

Since I am using font awesome icons I am calling every fa classes each time using .each() method which is an alternative to the javascript forEach() method. Then I changed the colour of the selected icons by calling a custom generated randomColor function. The randomColor function generates random hexadecimal colours on each call by selecting random values from the array.

The Math.random() returns a random number between 0 (inclusive), and 1 (exclusive). Math.random() used with Math.floor() can be used to return random integers.

Math.floor(Math.random() * 10);     // returns a number between 0 and 9

Now let's see the complete code for our demo HTML page. I used some CSS and Bootstrap for styling and making basic layouts.

<!DOCTYPE html>
<html lang="en">
<head>
	<title>Random Color Icons - Demo</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	
	<!-- Font Awesome Icons -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
	
	<style>

	.with-border {
    border-bottom:2px solid #dbd9d9;
	border-left:1px solid #f2f2f2;
	border-right:1px solid #f2f2f2;
	border-top:1px solid #f2f2f2;
	background-color:#f9f9f9;	
    }
    
    .with-border:hover {
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

    }
	
	@media (max-width:992px)  {
		.with-border {
		   margin: 20px 10px;
		 }
	}

	.with-border h2{
		font-size : 65px;
	}
	
	</style
</head>
<body>
	<div class="container">

		<p>&nbsp;</p>
		<h2 class="text-center" style="font-weight:bold;color:#7c4dff;">Random Color Icons - Demo</h2>
		<p>&nbsp;</p>

		<div class="row">
				<div class="col-md-2">
					<div class="with-border text-center">
						<h2><i class="fa fa-user" aria-hidden="true"></i></h2>
					</div>	
				</div>
				<div class="col-md-2">
					<div class="with-border text-center">
						<h2><i class="fa fa-thumbs-up" aria-hidden="true"></i></h2>
					</div>	
				</div>
				<div class="col-md-2">
					<div class="with-border text-center">
						<h2><i class="fa fa-group" aria-hidden="true"></i></h2>
					</div>	
				</div>
				<div class="col-md-2">
					<div class="with-border text-center">
						<h2><i class="fa fa-share-alt" aria-hidden="true"></i></h2>
					</div>	
				</div>
				<div class="col-md-2">
					<div class="with-border text-center">
						<h2><i class="fa fa-file" aria-hidden="true"></i></h2>
					</div>	
				</div>
				<div class="col-md-2">
					<div class="with-border text-center">
						<h2><i class="fa fa-gear" aria-hidden="true"></i></h2>
					</div>	
				</div>
		</div>
		
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<div class="row">
			<div class="col-md-2 col-md-offset-5">
				<button class="btn btn-default btn-block" onclick="window.location.reload()"><b>REFRESH</b></button
			</div>
		</div>
	</div>
	
	<script>
		<!-- Refer above JS Code -->
		
	</script>
	
</body>
</html>

The output image of above program is given below.

Random color icons - demo